<template>
  <div class="homePage">
    <div class="lbt-max">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
      <div class="shang">
        <div class="ipt-span">
          <span>上海</span>
          <van-icon name="play" class="zfz-icon" />
        </div>

        <!-- input 头部导航 -->
        <div class="ipt-dz">
          <div class="zfz-line"></div>
          <!-- 搜索图标 -->
          <van-icon name="search" /><input
            type="text"
            placeholder="请输入小区或地址"
          /> 
        </div>
        
      </div>
      <!-- 这是右侧vip -->
      <div class="vip-icon"><van-icon name="vip-card-o" @click="jumpHouse" /></div>
    </div>
    <!-- 轮播图下面图标 -->
    <div class="zfz-heard">
      <van-grid :border="false">
        <van-grid-item icon="wap-home-o" text="整租" />
        <van-grid-item icon="friends-o" text="合租" />
        <van-grid-item icon="guide-o" text="地图找房" @click="$router.push('/houseMap')"/>
        <van-grid-item icon="wap-home-o" text="去出租" @click="$router.push('/goRentout')"/>
      </van-grid>
    </div>
    <div class="nav-zuf">
      <span class="zfxz">租房小组</span>
      <span>更多</span>
    </div>
    <!-- 中间内容 -->
    <div class="souMian">
      <van-grid direction="horizontal" :column-num="2" :gutter="10">
        <van-grid-item v-for="item in goodList" :key="item.id">
          <img :src="'http://liufusong.top:8080' + item.imgSrc" alt="" />
          <!-- <template ><p></p></template> -->
          <div>
            <p>{{ item.title }}</p>
            <p>{{ item.desc }}</p>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { houseGroup } from '@/api/home';
export default {
  name: 'LessonDrinking',

  data() {
    return {
      images: [
        'http://liufusong.top:8080/img/swiper/1.png',
        'http://liufusong.top:8080/img/swiper/2.png',
        'http://liufusong.top:8080/img/swiper/3.png',
      ],
      goodList: [],
    };
  },
  created() {
    this.souTz();
  },
  mounted() {},

  methods: {
    async souTz() {
      try {
        const res = await houseGroup();
        console.log(res.body);
        this.goodList = res.body;
      } catch (err) {
        console.log(err);
      }
    },
    jumpHouse(){
      this.$router.push({name:"HouseMap",query:{event: Event}})
    }
   
  },
};
</script>

<style lang="less" scoped>
.homePage {
  background-color: #f6f5f6;
}
.lbt-max {
  position: relative;
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    height: 200px;
    // background-color: blue;
    img {
      width: 100%;
      height: 100%;
    }
  }
  //vip图标
  .vip-icon{
    position: absolute;
    font-size: 24PX;
    top: 30px;
    right: 13px;
  }
  .shang {
    display: flex;
    position: absolute;
    top: 25px;
    height: 35px;
    left: 20px;
    width: 310px;
    border-radius: 3px;
    background-color: rgb(255, 255, 255);
    // z-index: 2;
    .ipt-span {
      width: 80px;
      height: 35px;
      padding-left: 5px;
      //  background-color: pink;
      .zfz-icon {
        transform: rotate(90deg);
      }
      span {
        padding: 5px;
        height: 35px;
        width: 80px;
        line-height: 35px;
      }
    }
    //input 头部导航
    .ipt-dz {
      text-align: center;
      padding-top: 6px;
      width: 100%;
      height: 35px;
      //搜索图标
      .van-icon {
        padding-right: 5px;
        font-size: 18px;
      }

      //搜索框
      input {
        top: 5px;
        border: none;
      }
      // background-color: yellow;
      //  position: absolute;
    }
    //地址旁边线条
    .zfz-line {
      position: absolute;
      top: 7px;
      left: 52px;
      width: 15px;
      height: 20px;
      border-right: 1px solid #a1a0a0;
    }
  }
}
.nav-zuf {
  width: 100%;
  height: 50px;
  // background-color: rgb(173, 17, 43);
  display: flex;
  justify-content: space-between;
  .zfxz {
    text-align: center;
    color: black;
    width: 100px;
    height: 50px;
    line-height: 50px;
  }
  span {
    color: #798690;
    text-align: center;
    padding-right: 15px;
    height: 50px;
    line-height: 50px;
  }
}
//图标背景图
.zfz-heard {
  /deep/.van-icon,
  .van-icon,
  .van-icon-guide-o,
  .van-grid-item__icon {
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border-radius: 50%;
    color:#04af69;
    background-color: #f2fbf7;
  }
}
// 中间内容
.souMian {
  img {
    height: 50px;
    width: 50px;
  }
}
</style>
